<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const radarOption = computed(() => {
    return {
      legend: {
        data: ['Allocated Budget', 'Actual Spending'],
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '电压偏差', max: 6500 },
          { name: '频率偏差', max: 16000 },
          { name: '谐波含量', max: 30000 },
          { name: '闪变', max: 38000 },
          { name: '功率因数', max: 52000 },
          { name: '三相电压不平衡度', max: 25000 },
          { name: '三相电流不平衡度', max: 25000 },
          { name: '电压暂降次数', max: 25000 },
          { name: '电压中断次数', max: 25000 },
        ],
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000, 15000, 7000, 8000],
            },
          ],
        },
      ],
    };
  });

  const radarColumns = [
    { title: '', dataIndex: 'name', key: 'name', width: 150, align: 'center', colSpan: 0 },
    { title: '', dataIndex: 'value', key: 'value', align: 'center', colSpan: 0 },
  ];

  const radarTableData = ref([
    {
      name: '电压偏差',
      value: '',
    },
    {
      name: '频率偏差',
      value: '',
    },
    {
      name: '谐波含量',
      value: '',
    },
    {
      name: '闪变',
      value: '',
    },
    {
      name: '功率因数',
      value: '',
    },
    {
      name: '三相电压不平衡度',
      value: '',
    },
    {
      name: '三相电流不平衡度',
      value: '',
    },
    {
      name: '电压暂降次数',
      value: '',
    },
    {
      name: '电压中断次数',
      value: '',
    },
  ]);

  const indexColumns = [
    { title: '指标名称', dataIndex: 'name', key: 'name', width: 150, align: 'center' },
    { title: '实际值', dataIndex: 'actValue', key: 'actValue', align: 'center' },
    { title: '标准值', dataIndex: 'stanValue', key: 'stanValue', align: 'center' },
    { title: '评分', dataIndex: 'score', key: 'score', align: 'center' },
  ];

  const indexTableData = ref([
    {
      name: '电压偏差',
      actValue: '',
      stanValue: '±5%',
      score: '',
    },
    {
      name: '频率偏差',
      actValue: '',
      stanValue: '±0.1%',
      score: '',
    },
    {
      name: '谐波含量',
      actValue: '',
      stanValue: '< 5%',
      score: '',
    },
    {
      name: '闪变',
      actValue: '',
      stanValue: '< 1%',
      score: '',
    },
    {
      name: '功率因数',
      actValue: '',
      stanValue: '0.95-1.00',
      score: '',
    },
    {
      name: '三相电压不平衡度',
      actValue: '',
      stanValue: '< 2% ',
      score: '',
    },
    {
      name: '三相电流不平衡度',
      actValue: '',
      stanValue: '< 2%',
      score: '',
    },
    {
      name: '电压暂降次数',
      actValue: '',
      stanValue: '< 10次/年',
      score: '',
    },
    {
      name: '电压中断次数',
      actValue: '',
      stanValue: '< 1次/年',
      score: '',
    },
    {
      name: '电流',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '相间电压',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '有功功率',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '无功功率',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '视在功率',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '设备负载率',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '设备综合效率',
      actValue: '',
      stanValue: '-',
      score: '',
    },
    {
      name: '设备温度',
      actValue: '',
      stanValue: '-',
      score: '',
    },
  ]);

  const historyColumns = [
    { title: '日期', dataIndex: 'date', key: 'date', width: 150, align: 'center' },
    { title: '评分', dataIndex: 'score', key: 'score', align: 'center' },
  ];

  const historyTableData = ref([
    {
      date: '2024-06-01',
      score: '85',
    },
    {
      date: '2024-06-02',
      score: '83',
    },
  ]);

  const historyOption = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="12">
        <a-card>
          <a-button type="primary">开始分析</a-button>
          <div class="chart">
            <eChart :option="radarOption" name="radarOption" />
          </div>
          <a-table :columns="radarColumns" :data-source="radarTableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex == 'value'">
                <div>
                  <a-input v-model:value="record.value" style="margin: -5px 0" />
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-table :columns="indexColumns" :data-source="indexTableData" rowKey="id" :pagination="false">
            <template #bodyCell="{ column, text, record }">
              <template v-if="['actValue', 'score'].includes(column.dataIndex)">
                <div>
                  <a-input v-model:value="record.value" style="margin: -5px 0" />
                </div>
              </template>
            </template>
          </a-table>
          <a-button type="primary" class="save">保存</a-button>
        </a-card>
      </a-col>

      <a-col :span="12">
        <a-card title="历史分析报告列表" class="bottom">
          <a-table :columns="historyColumns" :data-source="historyTableData" rowKey="id"> </a-table>
        </a-card>
      </a-col>

      <a-col :span="12">
        <a-card title="历史10次分析电能质量评分的曲线图" class="bottom">
          <div class="chart">
            <eChart :option="historyOption" name="historyOption" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .ant-card {
    min-height: 1100px;
  }

  .chart {
    width: 100%;
    height: 450px;
  }

  .save {
    margin-top: 20px;
  }

  .bottom {
    min-height: 800px;
    .chart {
      width: 100%;
      height: 650px;
    }
  }
</style>
